<template>
    <PublicContentVue>
        <div class="form-check" style="float: right;">
            <input class="form-check-input" type="radio" v-model="select_record" id="personalRecord" value="personalRecord" 
            @change="getSelectRecord">
            <label class="form-check-label" for="personalRecord">
                只看自己
            </label>
        </div>
        <div class="form-check" style="float: right; margin-right: 20px;">
            <input class="form-check-input" type="radio" v-model="select_record" id="allRecord" value="allRecord"
            checked @change="getSelectRecord">
            <label class="form-check-label" for="allRecord">
                全部对局
            </label>
        </div>
        <table class="table table-striped" style="text-align: center;">
            <thead>
                <tr>
                    <th>玩家A</th>
                    <th>玩家B</th>
                    <th class="isHidden">对战结果</th>
                    <th class="isHidden">对战时间</th>
                    <th>对战回放</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="record in records" :key="record.record.id">
                    <td>
                        <img :src="record.a_photo" alt="" class="record_img">
                        <span :class="record.record.loser === 'A'? 'record_username2' : 'record_username1' ">{{record.a_username}}</span>
                    </td>
                    <td>
                        <img :src="record.b_photo" alt="" class="record_img">
                        <span :class="record.record.loser === 'B'? 'record_username2' : 'record_username1' ">{{record.b_username}}</span>
                    </td>
                    <td class="isHidden">{{record.result}}</td>
                    <td class="isHidden">{{record.record.createTime}}</td>
                    <td>
                        <button @click="open_record_content(record.record.id)" class="btn btn-secondary">查看录像</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <nav aria-label="..." style="float: right;">
            <ul class="pagination">
                <li class="page-item ">
                  <a class="page-link" href="#"  @click="click_page(-1)">前一页</a>
                </li>
                <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number">
                    <a class="page-link" href="#" @click="click_page(page.number)" >{{page.number}}</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#" @click="click_page(-2)">后一页</a>
                </li>
              </ul>
        </nav>
    </PublicContentVue>
</template>

<script>
    import PublicContentVue from "@/components/PublicContent.vue";
    import {useStore} from 'vuex';
    import {useRouter} from 'vue-router'
    import {ref} from 'vue';
    import $ from 'jquery';
    export default{
        components:{
            PublicContentVue
        },
        setup() {
            const store = useStore();
            const router = useRouter();
            let records = ref([]);
            let current_page = 1; //当前在第几页
            let total_records = 0; //对战记录总数
            let pages = ref([]);
            let select_record = ref('allRecord')
            
            const getSelectRecord = function(){
                current_page = 1
                RecordsPage(current_page,select_record.value,store.state.user.id);
            }

            const click_page = page => {
                if(page === -1) page = current_page - 1;
                else if(page === -2) page = current_page + 1;
                let max_pages = parseInt(Math.ceil(total_records / 8))

                if(page >= 1 && page <= max_pages) 
                    RecordsPage(page,select_record.value,store.state.user.id)
            }

            const update_page = () => {
                let max_pages = parseInt(Math.ceil(total_records / 8));
                let new_pages = [];
                for(let i = current_page - 2; i <= current_page + 2; i++){
                    if(i >= 1 &&i <= max_pages){
                        new_pages.push({
                            number:i,
                            is_active:i === current_page ? "active":"",
                        });
                    }
                }
                pages.value = new_pages;
            }

            const RecordsPage = function(page,select,userId){
                current_page = page;
                $.ajax({
                    type: "get",
                    url: "https://xwjsnakebot.com.cn/api/record/getList/",
                    data: {
                        page,
                        select,
                        userId
                    },
                    headers: {
                        Authorization:"Bearer "+store.state.user.token,
                    }, 
                    success(response){
                        total_records = response.records_count;
                        records.value = response.records;
                        update_page();
                    }
                });
            }

            // 将字符串转换为一个二维数组
            const stringToArray= map => {
                let g = [];
                for(let i = 0,k = 0; i < 13; i++){
                    let line = []
                    for(let j = 0; j < 14; j++,k++){
                        line.push(parseInt(map[k]))
                    }
                    g.push(line)
                }
                return g;
            }

            const open_record_content = (recordId) => {
                for (const record of records.value){
                    if(recordId === record.record.id){
                        store.commit("updateIsRecord",true);
                        store.commit("UpdateGameMap",{
                            gameMap:stringToArray(record.record.map),
                            a_id:record.record.aid,
                            a_sx:record.record.asx,
                            a_sy:record.record.asy,
                            b_id:record.record.bid,
                            b_sx:record.record.bsx,
                            b_sy:record.record.bsy,
                        });
                        store.commit("updateSteps",{
                            a_steps:record.record.asteps,
                            b_steps:record.record.bsteps,
                        });
                        store.commit("updateRecordLoser",record.record.loser)
                        router.push({
                            name:'record_content',
                            params:{
                                recordId
                            }
                        })
                        break;
                    }
                }
            }
            RecordsPage(current_page,select_record.value,store.state.user.id);
            return {
                records,
                open_record_content,
                pages,
                click_page,
                select_record,
                getSelectRecord
            }
        },
    }
</script>

<style scoped>
    .record_img{
        width: 5vh;
        border-radius: 50%;
    }
    table span{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: inline-block;
        width: 50px;
        height: 30px;
        margin-left: 5px;
    }
    .record_username1{
        background-color: rgb(175, 220, 242);
        border-radius: 45%;
    }
    .record_username2{
        background-color: rgb(234, 143, 143);
        border-radius: 45%;
    }
    @media screen and (max-width: 430px) and (min-width: 300px) {
        table{
            font-size: 12px;
        }
        table .isHidden{
            display: none;
        }
        button{
            font-size: 12px;
        }
    }
    @media screen and (max-width: 590px) and (min-width: 430px){
        table{
            font-size: 12px;
        }
        button{
            font-size: 12px;
        }
        table .isHidden{
            display: none;
        }
    }
</style>